<template>
  <div>
    <!--查询列表-->
    <el-form ref="searchForm" :inline="true" :model="guestsForSearch" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="guestsForSearch.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="guestsForSearch.sex" placeholder="性别" clearable>
          <el-option v-for="item in sexList" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="card">
        <el-input v-model="guestsForSearch.card" placeholder="card"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="guestsForSearch.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="时间段">
        <el-date-picker
          v-model="guestsForSearch.enterTime"
          :editable="false"
          format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="房间号">
        <el-input v-model="guestsForSearch.num" placeholder="房间号"></el-input>
      </el-form-item>
      <el-form-item label="房间类型">
        <el-select v-model="guestsForSearch.typeId" placeholder="房间类型" clearable>
          <el-option v-for="item in typeList" :label="item.typeName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getGuests">查询</el-button>
        <el-button type="primary" @click="showDia">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表显示-->
    <el-table
      ref="multipleTable"
      :data="guestsList"
      tooltip-effect="dark"
      style="width: 100%"
      @cell-click="toggleShow"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      <!--姓名 -->
      <el-table-column
        prop="name"
        label="姓名"
        width="90"
        align="center">
        <template slot-scope="scope">
          <el-input
            @blur="saveEditedGuests(scope.row)"
            :autofocus="true"
            size="medium"
            v-if="cellInfo.label == '姓名' && cellInfo.guestId == scope.row.id"
            v-model="scope.row.name"
          ></el-input>
          <span v-else>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <!--性别-->
      <el-table-column
        label="性别"
        width="100"
        align="center">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.sex"
            @change="saveEditedGuests(scope.row)"
            v-if="cellInfo.label == '性别' && cellInfo.guestId == scope.row.id"
            placeholder="请选择性别"
          >
            <el-option v-for="item in sexList" :label="item" :value="item"></el-option>
          </el-select>
          <span v-else >{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <!--card-->
      <el-table-column
        label="card"
        width="200"
        align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.card"
            @blur="saveEditedGuests(scope.row)"
            size="medium"
            v-if="cellInfo.label == 'card' && cellInfo.guestId == scope.row.id"
          ></el-input>
          <span v-else >{{ scope.row.card }}</span>
        </template>
      </el-table-column>
      <!--电话-->
      <el-table-column
        label="电话"
        width="150"
        align="center">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.phone"
            @blur="saveEditedGuests(scope.row)"
            size="medium"
            v-if="cellInfo.label == '电话' && cellInfo.guestId == scope.row.id"
          ></el-input>
          <span v-else >{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <!--入住时间-->
      <el-table-column
        label="入住时间"
        width="300"
        align="center"
        prop="enterTime">
      </el-table-column>
      <!--房间号-->
      <el-table-column
        label="房间号"
        width="120"
        align="center">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.num"
            @change="saveEditedGuests(scope.row)"
            v-if="cellInfo.label == '房间号' && cellInfo.guestId == scope.row.id"
            placeholder="请选择房间号"
          >
            <el-option v-for="item in homeList" :label="item.num" :value="item.num"></el-option>
          </el-select>
          <span v-else >{{ scope.row.num }}</span>
        </template>
      </el-table-column>
      <!--房间类型-->
      <el-table-column
        label="房间类型"
        width="180"
        align="center"
        prop="typeName">
      </el-table-column>

      <!--操作区域-->
      <el-table-column label="操作" align="center">
        <template v-slot="scope">
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index,scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        background
        :page-sizes="[10, 20, 30, 40]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next,jumper"
        :total="page.total">
      </el-pagination>
    </el-card>

    <!--添加类型弹窗-->
    <el-dialog title="创建房间类型" :visible.sync="dialogFormVisible">

      <el-form :rules="rules" ref="guestsForm" :model="guests" label-width="80px">
        <el-form-item prop="name" label="姓名">
          <el-input v-model="guests.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item prop="sex" label="性别">
          <el-select v-model="guests.sex" placeholder="性别" clearable>
            <el-option v-for="item in sexList" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="card" label="card">
          <el-input v-model="guests.card" placeholder="card"></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号">
          <el-input v-model="guests.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="enterTime" label="入住时间">
          <el-date-picker
            v-model="guests.enterTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="num" label="房间号">
          <el-select
            v-model="guests.num"
            @change="changeTypeIdForShowList = guests.num"
            placeholder="请选择房间号"
          >
            <el-option v-for="item in homeList" :label="item.num" :value="item.num"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间类型">
          <span>{{changeTypeIdForShowList}}</span>
        </el-form-item>

        <!--操作区域-->
        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="createGuests">保 存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {addGuest, deleteGuests, getList, init, saveGuest} from "@/api/guests";

export default {
  data(){
    return{
      guestsList:[],//租客列表
      page:{
        pageNum:1,
        pageSize:10,
        total: 40
      },//页面信息
      multipleSelection: [],//多选操作
      guestsForSearch:{
        name:"",
        sex:"",
        card:"",
        phone:"",
        enterTime:"",
        startTime:"",
        endTime:"",
        num:"",
        typeId:"",//后台type 需要id / name
      },//租客封装对象
      guests:{
        name:"",
        sex:"",
        card:"",
        phone:"",
        enterTime:"",
        num:"",
        tId:""//后台type 需要id / name
      },
      dialogFormVisible:false,//弹窗显示
      cellInfo:{
        label:"",//所点击列名
        guestId:-1//所点击行索引
      },//编辑状态的行列信息
      sexList:['男',"女","嬲"],//性别列表
      homeList:[],//房间列表
      typeList:[],//房类型列表
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        card: [
          { required: true, message: '请输入card', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号必填', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
        ],
        enterTime: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ],
        num: [
          { required: true, message: '请选择房间号', trigger: 'change' }
        ]
      },//表单验证
    }
  },
  computed:{
    /**
     * 计算属性监听 房间号num的改变，num改变guests对象的tId也随之改变
     */
    changeTypeIdForShowList:{
      get:function (){
        let typeName = "";
        this.typeList.forEach(item => item.id == this.guests.tId && (typeName = item.typeName))
        return typeName;
      },
      set:function (homeNum){
        this.homeList.forEach(item => {
          if (item.num == homeNum) {
            this.guests.tId = item.hTypeId;
          }
        })
      }
    }
  },
  methods:{
    /**
     * 获取租客
     */
    getGuests(){
      //封装查询信息
      this.guestsForSearch.startTime = this.guestsForSearch.enterTime == null ? "" : this.guestsForSearch.enterTime[0];
      this.guestsForSearch.endTime = this.guestsForSearch.enterTime == null ? "" : this.guestsForSearch.enterTime[0];
      this.guestsForSearch.pageNum = this.page.pageNum;
      this.guestsForSearch.pageSize = this.page.pageSize;
      getList(this.guestsForSearch).then(res => {
        if (res.code == 20000) {
          this.guestsList = res.data.guestsList;
          this.page.total = res.data.total;
          this.$refs["searchForm"].resetFields();
        }else {
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 修改每页显示条数
     * @param pageSize
     */
    handleSizeChange(pageSize){
      this.page.pageSize = pageSize;
      this.getGuests();
    },
    /**
     * 修改页码
     * @param pageNum
     */
    handleCurrentChange(pageNum){
      this.page.pageNum = pageNum;
      this.getGuests();
    },
    /**
     * 删除租客
     */
    handleDelete(index,guests){
      let tarGuests = this.multipleSelection;
      if (tarGuests.length <= 0) {
        tarGuests = [guests];
      }

      deleteGuests(tarGuests).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message);
          this.getGuests();
        }else {
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 获取当前所选对象
     * @param val
     */
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    /**
     * 展示弹窗
     */
    showDia(){
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["guestsForm"].resetFields();
        this.guests.tId = 0;
      })
    },
    /**
     * 添加租客
     */
    createGuests(){
      this.$refs["guestsForm"].validate((valid) =>{
        if (valid) {
          addGuest(this.guests).then(res => {
            if (res.code === 20000) {
              this.$message.success(res.message);
              this.getGuests();
            }else {
              this.$message.error(res.message);
            }
            this.dialogFormVisible = false;
          })
        } else {
          return false;
        }
      })
    },
    /**
     * 切换编辑显示
     * @param index
     * @param guests
     */
    toggleShow(row, column, cell, event){
      this.cellInfo.label = column.label;//获取当前列名
      this.cellInfo.guestId = row.id;//获取当前点击行对象id
    },
    /**
     * 保存修改的租客
     * @param guests
     */
    saveEditedGuests(guests){
      saveGuest(guests).then(res => {
        if (res.code == 20000) {
          this.$message.success(res.message);
          this.getGuests();
        }else {
          this.$message.error(res.message);
        }
      })

      //重置单元格信息
      this.cellInfo.label = "";
      this.cellInfo.guestId = -1;
    }
  },
  mounted() {
    //初始化租客页面
    init().then(res => {
      if (res.code == 20000) {
        this.homeList = res.data.homeList;
        this.typeList = res.data.typeList;
      }else {
        this.$message.error(res.message);
      }
    })
    this.getGuests();
  }
}
</script>

<style scoped lang="scss">

</style>
